<template>
  <template v-for='item in list'>
    <div class='friend-card-components' v-if='item.friendList.length !== 0'>
      <div class='link-nav'>
        <h6 class='link-title'>{{ item.name }}</h6>
        <span>{{ item.description }}</span>
      </div>
      <ul class='link-items'>
        <template v-for='link in item.friendList' :key='link.id'>
          <li class='link-item fade-before fade-after' :title='link.linkName'>
            <FriendCardItem :link='link'/>
          </li>
        </template>
      </ul>
    </div>
  </template>
</template>

<script lang='ts'>
import FriendCardItem from '@/components/kit/FriendCardItem/index.vue'

export default {
  name: 'index',
  props: ['list'],
  components: { FriendCardItem }
}
</script>

<style scoped>
.link-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 1.5rem;
}

.link-title {
    font-size: 2.25rem;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px hsl(var(--font-color) / .2);
    -webkit-mask: linear-gradient(#000 80%, #0000 80%);
    margin: 0 0 -0.45rem;
}

.link-nav span {
    display: flex;
    align-items: center;
    font-size: .75rem;
    color: hsl(var(--font-color) / .5);
    background: var(--w-bg);
    border-radius: 1em;
    box-shadow: var(--box-shadow);
    padding: 1em;
    margin: 0 0 -1em;
    line-height: 1;
}

.link-items {
    display: grid;
    margin: 0;
    gap: 1.5rem;
    grid: auto / repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    list-style: none;
}

.link-item {
    position: relative;
    font-size: var(--font-size-small);
    border-radius: var(--radius);
    box-shadow: var(--box-shadow-white);
    transition: .5s;
    overflow: hidden;
}
</style>
